<template>
	<view class="shop">
		<view class="goods_list">
			<view class="goods_item" v-for="item in goodsInfos">
				<!-- 图片 -->
				<image :src="item.image_src">
				<view class="pirce" >
					<text>￥{{item.image_width}}</text>
					<text>￥{{item.image_width - 30}}</text>
						
				</view>
				<view class="goods_info" >
					<text>{{item.name}}</text>
				</view>
				
			</view>
		</view>
		<view v-if="flag" style="text-align: center;color: #555555;">------我也是有底线的---------</view>
	</view>
</template>

<script>
	// 导入组件
	import goodsList from '../../components/goods/goods.vue'
	export default {
		data() {
			return {
				// 数据列表
				goods:[],
				goodsInfo:[],
				goodsInfos:[],
				flag:false
			}
		},
		components:{
			'goods-list':goodsList
		},
			
		onLoad(){
			this.getGoodsInfo();
		},
		// 触底函数
		onReachBottom(){
			if(this.goodsInfos.length > 10){
				this.flag = true			
				}
		},
		methods: {
			// 获取商品数据
			async getGoodsInfo(){
				const res = await this.$Myrequest({
					url:'/home/floordata'
				})
				this.goods = res.data.message
				this.goods.forEach((item,index) => {
					this.goodsInfo.push(item.product_list)
				})
				this.goodsInfos = [].concat.apply([],this.goodsInfo)
				// console.log(this.goods)
				// console.log(this.goodsInfo)
				// console.log(this.goodsInfos)
				uni.stopPullDownRefresh()
			},
			// 下拉刷新
			// 先清空商品数据，再重新获取商品数据
			onPullDownRefresh(){
				console.log('下拉刷新')
				this.flag = false
				this.goodsInfos = []
				setTimeout(() => {
					this.getGoodsInfo()
				},1000)
				
			},
			
		}
	}
</script>

<style lang="scss">
	.shop{
		background: #e7e7e7;
	}
	
.goods_list{
		padding: 0 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.goods_item{
			width: 355rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 15rpx;
			margin: 10rpx 0;
			border-radius: 10rpx;
			image{
				width: 90%;
				height: 180px;
				padding: 10rpx 0;
				display: block;
				margin: auto;
			}
			.pirce{
				color: $shop-color;
				font-size: 30rpx;
				text:nth-child(2){
					color: #C0C0C0;
					font-size: 28rpx;
					margin-left: 18rpx;
					text-decoration: line-through;
				}
			}
			
			.goods_info{
				font: 28rpx;
				line-height: 50rpx;
				padding: 10rpx 0;
			}
			
		}
	}
	
	.goods_item:hover{
		box-shadow:5rpx 2rpx 5rpx 5rpx #ca0000;
	}
</style>
